<template>
  <div class="web_log absolute">
    <div class="back">
      <img src="http://diandian.zgkpz.com/images/m_log/cha.png" @click="back" />
    </div>
    <div class="main">
      <div class="log_info">
        <p class="info_name">小浣熊</p>
        <p class="info_b_time">
          今天新闯关了
          <span>2</span>关，用时
          <span>23分 05 秒</span>
        </p>
        <div class="info_settlement">
          <p>
            总闯关数：
            <span>3</span>
          </p>
          <p>
            总学习时长：
            <span>53分 05 秒</span>
          </p>
        </div>
      </div>
    </div>
    <div class="log_list">
      <div class="biaoti">
        <span>课程</span>
        <span>积分</span>
        <span>时长</span>
        <span>时间</span>
      </div>
      <div class="for_list">
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
        <div class="list">
          <span>初级课程-1</span>
          <span>100</span>
          <span>1分43秒</span>
          <span>2020-01-05</span>
        </div>
      </div>
      <div class="list_pag">
        <button v-for="(item, index) in pagList" :key="index">{{ item.name }}</button>
      </div>
    </div>
  </div>
</template>

<script>
const NAME = "User";
export default {
  name: NAME,
  props: {},
  data: function () {
    return {
      pagList: [
        { id: 0, name: "首页" },
        { id: 1, name: "1" },
        { id: 2, name: "2" },
        { id: 3, name: "3" },
        { id: 4, name: "4" },
        { id: 5, name: "5" },
        { id: 6, name: "6" },
        { id: 7, name: "7" },
        { id: 8, name: "8" },
        { id: 9, name: "9" },
        { id: 10, name: "末页" },
      ],
      userInfo: {},
    };
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  watch: {},
  mounted: function () {},
  methods: {
    handleResize() {
      if (document.body.clientWidth < 768) {
        this.$router.replace({ path: "/log" });
      }
    },
    back() {
      this.$router.replace({ path: "/main" });
    },
  },
};
</script>

<style scoped>
.back img {
  width: 0.15rem;
  position: absolute;
  left: 2%;
  top: 2%;
}
.main {
  text-align: center;
  color: #ffffff;
  font-size: 0.15rem;
  line-height: 0.25rem;
}
.main span {
  color: #f7ff9f;
}
.log_info {
  line-height: 0.19rem;
  position: absolute;
  width: 100%;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
}
.info-name {
  font-size: 0.25rem;
}
.info_b_time,
.info_settlement {
  font-size: 0.09rem;
}
.info_settlement {
  display: flex;
  justify-content: space-between;
  padding: 0 2.11rem;
}

.log_list {
  position: absolute;
  bottom: 0;
  height: 64%;
  line-height: 0.18rem;
}
.biaoti {
  margin-top: 0.1rem;
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  color: #ffffff;
  font-size: 0.1rem;
}

.list {
  width: 90%;
  margin-left: 5%;
  height: 0.16rem;
  line-height: 0.16rem;
  display: inline-flex;
  justify-content: space-around;
  color: #e08b4c;
  font-size: 0.1rem;
  background: url("http://diandian.zgkpz.com/images/m_log/back.png") no-repeat;
  background-size: 100%100%;
  vertical-align: bottom;
  border-radius: 6px;
}
.for_list {
  height: 1.7rem;
  overflow-y: auto;
}
.list_pag {
  position: absolute;
  bottom: 5.5%;
  left: 50%;
  transform: translateX(-50%);
}
.list_pag button {
  color: #b16243;
  font-size: 0.1rem;
  background-color: #fee29e;
  border-radius: 5px;
  margin: 0 0.015rem;
  padding: 0.02rem 0.05rem;
  font-size: 0.08rem;
  cursor: pointer;
}
/* ipad 竖屏 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .web_log {
    background-image: url("http://diandian.zgkpz.com/images/m_log/background.png");
  }
  .log_info p {
    font-size: 0.3rem;
    line-height: 0.5rem;
  }
  .info_settlement {
    padding: 0 0.5rem;
  }
  .biaoti {
    margin-top: 0.5rem;
    font-size: 0.3rem;
    width: 88%;
    margin-left: 6%;
  }
  .list {
    height: 0.5rem;
    font-size: 0.3rem;
    width: 88%;
    margin-left: 6%;
  }
  .list span {
    line-height: 0.57rem;
  }
  .for_list {
    height: 4.6rem;
    line-height: 0.57rem;
    margin-top: 0.1rem;
  }
  .list_pag button {
    font-size: 0.1rem;
    border-radius: 5px;
    padding: 0.04rem 0.17rem;
    font-size: 0.3rem;
  }
  .list_pag {
    width: 90%;
    text-align: center;
  }
}
/* ipad横屏 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .log_info[data-v-66fed7a2] {
    line-height: 0.27rem;
    font-size: 0.2rem;
  }
  .info_b_time {
    font-size: 0.2rem;
  }
  .info_settlement {
    padding: 0 1.6rem;
    font-size: 0.2rem;
  }
  .for_list {
    height: 2.5rem;
    margin-top: 0.1rem;
  }
  .biaoti {
    margin-top: 0.3rem;
    font-size: 0.2rem;
    width: 88%;
    margin-left: 6%;
  }
  .list {
    height: 0.3rem;
    font-size: 0.2rem;
    width: 88%;
    margin-left: 6%;
    line-height: 0.33rem;
  }
  .for_list {
    line-height: 0.31rem;
    margin-top: 0.1rem;
  }
  .list_pag button {
    font-size: 0.1rem;
    border-radius: 5px;
    padding: 0.04rem 0.255rem;
    font-size: 0.14rem;
  }
  .list_pag {
    width: 96%;
    text-align: center;
  }
}
/* pro横屏 */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
  .log_info[data-v-66fed7a2] {
    line-height: 0.27rem;
    font-size: 0.2rem;
  }
  .info_b_time {
    font-size: 0.2rem;
  }
  .info_settlement {
    padding: 0 1.6rem;
    font-size: 0.2rem;
  }
  .for_list {
    height: 2.5rem;
    margin-top: 0.1rem;
  }
  .biaoti {
    margin-top: 0.3rem;
    font-size: 0.2rem;
    width: 88%;
    margin-left: 6%;
  }
  .list {
    height: 0.3rem;
    font-size: 0.2rem;
    width: 88%;
    margin-left: 6%;
    line-height: 0.33rem;
  }
  .for_list {
    line-height: 0.31rem;
    margin-top: 0.1rem;
  }
  .list_pag button {
    font-size: 0.1rem;
    border-radius: 5px;
    padding: 0.04rem 0.255rem;
    font-size: 0.14rem;
  }
  .list_pag {
    width: 96%;
    text-align: center;
  }
}
</style>
